<template>
    <div>
        <div class="container user-basic-box e-m-h-auto e-m-b-15">
            <el-page-header @back="goBack" content="小哥详情" class="e-p-b-15"></el-page-header>
            <div class="user-face">
                <div class="avatar">
                    <el-avatar v-if="details.photo" :src="fileURL + details.photo" :size="100"></el-avatar>
             				<el-avatar v-else-if="details.name" :size="100">{{details.name.charAt(0) }}</el-avatar>
                    <!-- <el-avatar :src="fileURL + details.photo" :size="100"></el-avatar> -->
                    <i class="iconfont icon-nan male" v-if="details.sex == '先生'"></i>
                    <i class="iconfont icon-nv female" v-else></i>
                </div>
                <div class="name"><span class="e-p-r-10">{{ details.name }}</span><el-tag size="mini">{{
                    details.authstate
                }}</el-tag></div>
            </div>
            <div class="basic flex">
                <div class="item"><i class="iconfont icon-shumashouji"></i><span>手机号码：{{ details.mobile }}</span></div>
                <div class="item"><i class="iconfont icon-kehuishou"></i><span>身份证号码：{{ details.identitycard }}</span>
                </div>
                <div class="item"><i class="iconfont icon-xueshengzhuce"></i><span>登录IP：{{
                    details.lastipaddress
                }}</span>
                </div>
                <div class="item"><i class="el-icon-location-outline"></i><span>工作地区：{{ details.citynames }}</span>
                </div>
            </div>
            <div class="statistics-content e-m-t-30">
                <div class="item e-flex-1">
                    <label>订单数</label>
                    <div><span class="num">{{ orderRecord.ordercount }}</span><small>单</small></div>
                </div>
                <div class="item e-flex-1">
                    <label>订单总重量</label>
                    <div><span class="num">{{ orderRecord.weight }}</span><small>KG</small></div>
                </div>
                <div class="item e-flex-1">
                    <label>减碳量</label>
                    <div><span class="num">{{ orderRecord.carbon }}</span><small>KG</small></div>
                </div>
            </div>
            <div class="statistics-content e-m-t-15">
                <div class="item e-flex-1">
                    <label>回收收益</label>
                    <div><span class="num">{{ orderRecord.income }}</span><small>元</small></div>
                </div>
                <div class="item e-flex-1">
                    <label>累计提现</label>
                    <div><span class="num">{{ orderRecord.cashout }}</span><small>元</small></div>
                </div>
                <div class="item e-flex-1">
                    <label>钱包余额</label>
                    <div><span class="num">{{ orderRecord.balance }}</span><small>元</small></div>
                </div>
            </div>
        </div>


        <div class="container e-m-h-auto e-m-b-15">

            <el-form label-width="150px">
                <h4>详细信息</h4>
                <div class="flex">
                    <div class="e-flex-1">
                        <el-form-item label="小哥等级:">
                            <span>{{ details.level.name }}</span>
                        </el-form-item>
                    </div>
                    <div class="e-flex-1">
                        <el-form-item label="累计奖金:">
                            <span>{{ details.balance }}元</span>
                        </el-form-item>
                    </div>
                    <div class="e-flex-1">
                        <el-form-item label="累计回收重量(KG):">
                            <span>{{ details.retrievecountweight }}</span>
                        </el-form-item>
                    </div>

                </div>
                <div class="flex">
                    <div class="e-flex-1">
                        <el-form-item label="是否在线:">
                            <span v-if="details.online">在线</span>
                            <span v-else>离线</span>
                        </el-form-item>
                    </div>
                    <div class="e-flex-1">
                        <el-form-item label="最后登录时间:">
                            <span>{{ details.lastlogindatetime }}</span>
                        </el-form-item>
                    </div>
                </div>
                <div class="flex">
                    <div class="e-flex-1">
                        <el-form-item label="位置:">
                            <div>
                                <span>{{ formattedAddress }}</span>
                                <span>({{ details.onlinelat }},{{ details.onlinelng }})</span>
                            </div>
                            <div class="map-center" id="container">
                                
                            </div>
                        </el-form-item>
                    </div>
                </div>
                <!-- <el-form-item> -->
                <!-- <el-button @click="goBack">返回</el-button> -->
                <!-- <el-button type="primary" @click="dialogVisible = true">重置密码</el-button> -->
                <!-- <el-button type="primary" @click="goLog">查看用户日志</el-button> -->
                <!-- </el-form-item> -->
            </el-form>
        </div>
        <div class="container e-m-h-auto e-m-b-15">
            <h4>认证信息</h4>
            <el-form label-width="160px">
                <div class="flex">
                    <div class="e-flex-1">
                        <el-form-item label="真实姓名:">
                            <span>{{ authForm.realname ? authForm.realname : '--' }}</span>
                        </el-form-item>
                    </div>
                    <div class="e-flex-1">
                        <el-form-item label="工作地区:">
                            <span>{{ authForm.citynames ? authForm.citynames.split(',').join('-') : '--' }}</span>
                        </el-form-item>
                    </div>
                    <div class="e-flex-1">
                        <el-form-item label="工作地址:">
                            <span>{{ authForm.address ? authForm.address : '--' }}</span>
                        </el-form-item>
                    </div>
                </div>
                <div class="flex">
                    <div class="e-flex-1">
                        <el-form-item label="身份证号码:">
                            <span>{{ authForm.identitycard ? authForm.identitycard : '--' }}</span>
                        </el-form-item>
                    </div>
                    <div class="e-flex-1">
                        <el-form-item label="身份证正反照:">

                            <el-image :src="fileURL + authForm.idcardfront"
                                :preview-src-list="[fileURL + authForm.idcardfront]" style="width:150px;height: 100px;">
                                <div slot="placeholder" class="image-slot">
                                    加载中<span class="dot">...</span>
                                </div>
                            </el-image>
                            <el-image :src="fileURL + authForm.idcardback"
                                :preview-src-list="[fileURL + authForm.idcardback]" style="width:150px;height: 100px">
                                <div slot="placeholder" class="image-slot">
                                    加载中<span class="dot">...</span>
                                </div>
                            </el-image>
                        </el-form-item>
                    </div>
                    <div class="e-flex-1"></div>
                </div>
                <div>
                    <el-button type="primary" @click="passAuth" v-if="details.authstate == '待审核'">通过认证</el-button>
                    <el-button type="danger" @click="rejectAuth" v-if="details.authstate == '待审核'">驳回认证</el-button>
                </div>
            </el-form>
        </div>
        <div class="container e-m-h-auto e-m-b-15">
            <h4>车辆信息</h4>
            <el-table :data="details.vehicles" style="width: 100%">
                <el-table-column fixed prop="typename" label="车辆类型" width="180">
                </el-table-column>
                <el-table-column prop="licenseplate" label="车牌号">
                </el-table-column>
                <el-table-column prop="load" label="装载量KG">
                </el-table-column>
                <el-table-column prop="driverslicensefront" label="行驶证">
                    <template slot-scope="scope">
                        <el-image style="width: 80px; height: 80px" :src="fileURL + scope.row.driverslicensefront"
                            fit="cover" :preview-src-list="[fileURL + scope.row.driverslicensefront]"></el-image>
                        <el-image style="width: 80px; height: 80px" :src="fileURL + scope.row.driverslicenseback"
                            fit="cover" :preview-src-list="[fileURL + scope.row.driverslicenseback]"></el-image>
                    </template>
                </el-table-column>
                <el-table-column label="驾驶证">
                    <template slot-scope="scope">
                        <el-image style="width: 80px; height: 80px" :src="fileURL + scope.row.driverslicensefront"
                            fit="cover" :preview-src-list="[fileURL + scope.row.driverslicensefront]"></el-image>
                        <el-image style="width: 80px; height: 80px" :src="fileURL + scope.row.drivinglicenseback"
                            fit="cover" :preview-src-list="[fileURL + scope.row.drivinglicenseback]"></el-image>
                    </template>
                </el-table-column>
                <el-table-column label="车辆照片">
                    <template slot-scope="scope">
                        <el-image style="width: 80px; height: 80px" :src="fileURL + scope.row.vehiclepic" fit="cover"
                            :preview-src-list="[fileURL + scope.row.vehiclepic]"></el-image>
                        <el-image style="width: 80px; height: 80px" :src="fileURL + scope.row.peoplevehiclepic"
                            fit="cover" :preview-src-list="[fileURL + scope.row.peoplevehiclepic]"></el-image>
                    </template>
                </el-table-column>
                <el-table-column label="默认">
                    <template slot-scope="scope">
                        <span class="color-success" v-if="scope.row.isdefault">是</span>
                        <span class="color-danger" v-else>否</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="container e-m-h-auto e-m-t-15">
            <h4>各品类回收汇总</h4>
            <el-table :data="orderRecord.orderdetails" style="width: 100%">
                <el-table-column fixed prop="typenames" label="可回收物" width="180">
                </el-table-column>
                <el-table-column prop="weight" label="数量（KG/件）">
                    <template slot-scope="scope">
                        <span>{{ scope.row.weight }}{{ scope.row.isweighing?'KG':'件' }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="amount" label="总收益（元）" width="180">
                </el-table-column>
            </el-table>
        </div>
        <div class="container e-m-h-auto e-m-t-15">
            <h4>最新订单</h4>
            <el-table :data="orderRecord.orderrecord" style="width: 100%">
                <el-table-column fixed prop="number" label="编号" width="180">
                </el-table-column>
                <el-table-column prop="createddatetime" label="下单时间">
                </el-table-column>
                <el-table-column prop="citynames" label="所属地区">
                    <template slot-scope="scope">
                        <span>{{ scope.row.citynames.split(',')[scope.row.citynames.split(',').length - 1] }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="详细地址">
                </el-table-column>
                <el-table-column prop="name" label="联系人">
                </el-table-column>
                <el-table-column prop="mobile" label="电话">
                </el-table-column>
                <el-table-column prop="brother" label="回收小哥">
                    <template slot-scope="scope">
                        <span v-if="scope.row.brother">{{ scope.row.brother.name }}</span>
                        <span v-else>--</span>
                    </template>
                </el-table-column>
                <el-table-column prop="managestate" label="状态">
                    <template slot-scope="scope">
                        <span class="color-success"
                            v-if="scope.row.managestate == '已接单' || scope.row.managestate == '已回收' || scope.row.managestate == '已入库'">{{
                                scope.row.managestate
                            }}</span>
                        <span class="color-danger"
                            v-else-if="scope.row.managestate == '待派单' || scope.row.managestate == '待接单' || scope.row.managestate == '待上门' || scope.row.managestate == '待付款' || scope.row.managestate == '待入库'">{{
                                scope.row.managestate
                            }}</span>
                        <span class="color-warning" v-else>{{ scope.row.managestate }}</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="container e-m-h-auto e-m-t-15">
            <div style="display: flex;justify-content: space-between;align-items: center;">
                <h4>提现记录</h4>
                <div style="font-size: 10px;color: #9fa3b0; cursor: pointer;" @click="golist">更多</div>
            </div>
            <el-table :data="orderRecord.cashrecord" style="width: 100%">
                <el-table-column fixed prop="number" label="编号" width="180">
                    <template slot-scope="scope">
                      <span @click="view(scope.row)" style="cursor: pointer">{{scope.row.number }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="billdetailnumber" label="流水编号">
                </el-table-column>
                <el-table-column prop="createdate" label="提现时间">
                </el-table-column>
                <el-table-column prop="username" label="提现人">
                </el-table-column>
                <el-table-column prop="amount" label="提现金额">
                </el-table-column>
                <el-table-column prop="state" label="状态" width="150">
                    <template slot-scope="scope"> 
                        <span class="color-success" v-if="scope.row.state == '已到账'">{{scope.row.state}}</span>
                        <span class="color-warning" v-if="scope.row.state == '待审核'">{{scope.row.state}}</span>
                        <span class="color-danger" v-if="scope.row.state == '已驳回'" :title="scope.row.reason">{{scope.row.state}}</span>
                        <span class="color-danger" v-if="scope.row.state == '打款出错'" :title="scope.row.reason">{{scope.row.state}}</span>
                        <span class="color-danger" v-if="scope.row.state == '已审核'">{{scope.row.state}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="100">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="goView(scope.row.id)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="e-m-t-15">
            <el-button @click="goBack">返回</el-button>
            <!-- <el-button type="primary" @click="passAuth" v-if="details.authstate == '待审核'">通过认证</el-button> -->
            <!-- <el-button type="danger" @click="rejectAuth" v-if="details.authstate == '待审核'">驳回认证</el-button> -->
        </div>
        <el-dialog title="重置密码" :visible.sync="dialogVisible" width="600px" :close-on-click-modal="false">
            <el-form ref="form" :model="form" :rules="rules" label-width="100px">
                <el-form-item label="新的密码">
                    <el-input v-model="form.password"></el-input>
                </el-form-item>
                <el-form-item label="确认密码">
                    <el-input v-model="form.confirmpassword"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">确认修改</el-button>
                    <el-button @click="dialogVisible = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!-- 查看小哥提现详情 -->
		<el-dialog title="查看详情" :visible.sync="dialogVisible2" width="1200px">
			<h3>基本信息</h3>
			<el-descriptions :column="2" border :labelStyle="{width:'150px'}">
				<el-descriptions-item label="提现申请编号">
					{{brotherForm.number}}
				</el-descriptions-item>
				<el-descriptions-item label="流水编号">
					{{brotherForm.billdetailnumber}}
				</el-descriptions-item>
				<el-descriptions-item label="提现方式">
					{{brotherForm.status}}
				</el-descriptions-item>
				<el-descriptions-item label="提现金额">
					{{brotherForm.amount}}元
				</el-descriptions-item>
				<el-descriptions-item label="申请时间">
					{{brotherForm.createdate}}
				</el-descriptions-item>
				<el-descriptions-item label="审核状态"> 
					<span class="color-success" v-if="brotherForm.state == '已到账'">{{brotherForm.state}}</span>
					<span class="color-warning" v-if="brotherForm.state == '待审核'">{{brotherForm.state}}</span>
					<span class="color-danger" v-if="brotherForm.state == '已驳回'" :title="brotherForm.reason">{{brotherForm.state}}</span>
					<span class="color-danger" v-if="brotherForm.state == '打款出错'" :title="brotherForm.reason">{{brotherForm.state}}</span>
					<span class="color-danger" v-if="brotherForm.state == '已审核'">{{brotherForm.state}}</span>
				</el-descriptions-item>
				<el-descriptions-item label="银行开户行">
					{{brotherForm.bankopenname}}
				</el-descriptions-item>
				<el-descriptions-item label="银行账号">
					{{brotherForm.bankaccount}}
				</el-descriptions-item>
				<el-descriptions-item label="银行户名">
					{{brotherForm.bankname}}
				</el-descriptions-item>
				<el-descriptions-item label="小哥名称">
					{{brotherForm.username}}
				</el-descriptions-item>
				<el-descriptions-item label="审核时间">
					{{brotherForm.examinedate}}
				</el-descriptions-item>
				<el-descriptions-item label="审核人">
					{{brotherForm.examinename}}
				</el-descriptions-item>
			</el-descriptions>
			<h3>打款信息</h3>
			<el-descriptions :column="2" border :labelStyle="{width:'150px'}">
				<el-descriptions-item label="打款流水编号">
					{{brotherForm.paymentno}}
				</el-descriptions-item> 
				<el-descriptions-item label="打款账号类型">
					{{brotherForm.payway}}
				</el-descriptions-item>
				<el-descriptions-item label="打款账号">
					{{brotherForm.accountnumber}}
				</el-descriptions-item>
			</el-descriptions>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible2 = false">关闭</el-button>
			</span>
		</el-dialog>
    </div>
</template>

<script>
export default {
    layout: 'admin',
    head() {
        return {
            title: '小哥详情' 
        }
    },
    props:{
      id:{
        type: Number,
        default: 0
      }
    },
    data() {
        let password = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                if (this.form.confirpwd !== '') {
                    this.$refs.form.validateField('confirpwd');
                }
                callback();
            }
        };
        let confirpwd = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.form.password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            brotherForm: { 
			},
			dialogVisible2 : false,
            orderRecord: {
                balance: 0,
                carbon: 0,
                cashout: 0,
                cashrecord: [],
                income: 0,
                ordercount: 0,
                orderdetails: [],
                orderrecord: [],
                regdays: 0,
                weight: 0,
            },
            details: { //小哥信息详情
                level: {}
            },
            authForm: {
                idcardpath: "",
                identitycard: "",
                mobile: "",
                realname: ""
            },

            page: 1,
            pageSize: 10,
            total: 4,
            loading: false,
            dialogVisible: false,
            form: {
                password: '',
                confirmpassword: ''
            },
            rules: {
                password: [{
                    validator: password,
                    trigger: 'blur'
                },
                {
                    min: 6,
                    max: 16,
                    message: '长度在 6 到 16 个字符',
                    trigger: 'blur'
                }
                ],
                confirmpassword: [{
                    validator: confirpwd,
                    trigger: 'blur'
                },
                {
                    min: 6,
                    max: 16,
                    message: '长度在 6 到 16 个字符',
                    trigger: 'blur'
                }
                ]
            },
            formattedAddress: ''
        }
    },
    mounted() {
        this.getDetails(this.id).then(()=>{
            this.initMap()
        })
        this.getAuthDetail(this.id)
        this.getGetOrderRecord(this.id)
    },
    methods: {
        initMap() {
            this.$AMapLoader.load({
                key: this.AMapSetting.key,             // 申请好的Web端开发者Key，首次调用 load 时必填
                version: this.AMapSetting.version,      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                plugins: ['AMap.Geocoder'],
            }).then((AMap) => {
                let map = new AMap.Map("container", {  //设置地图容器id
                    zoom: 12, //设置地图的缩放级别
                    resizeEnable: true,
                    center: [113.042648, 23.625349], //初始化地图中心点位置
                });

                // 小哥位置Marker：
                var marker = new AMap.Marker({
                    position: new AMap.LngLat(this.details.onlinelng, this.details.onlinelat),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                    title: '北京'
                });

                map.add(marker);

                map.setFitView();

                //逆向地理编码方法
                var lnglat = [this.details.onlinelng, this.details.onlinelat]

                var geocoder = new AMap.Geocoder({
                    // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
                    city: '0763'
                })
                geocoder.getAddress(lnglat, (status, result)=> {
                    if (status === 'complete' && result.info === 'OK') {
                        // result为对应的地理位置详细信息
                        console.log('geocoder:',result)
                        this.formattedAddress = result.regeocode.formattedAddress
                    }
                })
            }).catch(e => {
                console.log(e);
            })
        },
        view(row){
            this.$axios.post('/Admin/Brother/Apply/Details?id='+row.id).then((res)=>{
					console.log(res)
					this.brotherForm = res
					this.dialogVisible2 = true
				})
        },
        golist() {
            this.$router.push({
                path: "/withdrawal/list",
                query: { id:this.$route.query.id }
            })
        },
        goBack() {
            this.$emit('goBack')
        },
        pageChange(e) { // 页码切换事件
            this.page = e;
        },
        handleSizeChange(val) {
            this.page = 1;
            this.pageSize = val;
        },
        getAuthDetail(id) { //获取小哥认证信息
            this.$axios.get('/Admin/Brother/Account/GetAuthDetail?id=' + id).then((res) => {
                let form = res
                form.idcardpath = this.fileURL + form.idcardpath
                this.authForm = form
                console.log(this.authForm)
            })
        },
        passAuth() { //通过小哥认证
            this.$confirm('您确认通过认证吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$axios.post('/Admin/Brother/Account/Pass?id=' + this.id).then((res) => {
                    this.$message.success(res.msg);
                    this.getDetails(this.id)
                })
            })
        },
        rejectAuth() {   //驳回小哥认证
            this.$prompt('请填写驳回原因并点击确认', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(({ value }) => {
                this.$axios.post('/Admin/Brother/Account/Reject', {
                    id: this.id,
                    reason: value
                }).then((res) => {
                    this.$message.success(res.msg);
                    this.getDetails(this.id)
                })
            })
        },
        getDetails(id) {
            return this.$axios.get('/Admin/Brother/Account/Details?id=' + id).then((res) => {
                this.details = res
            })
        },
        getGetOrderRecord(id) {
            this.$axios.get('/Brother/Statistics/GetOrderRecord?id=' + id).then((res) => {
                console.log(res, "----getGetOrderRecord")
                this.orderRecord = res
            })
        },
        goLog() {
            this.$router.push({
                path: 'log'
            })
        },
        goView(id) {
            this.$router.push({
                path:'/order/user/Views?id=' + id
            })
        },
        onSubmit() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    // this.$axios.post('/admin/modifypwd', this.form).then((res) => {
                    //     this.$alert('密码修改成功, 请重新登录！', '提示', {
                    //         confirmButtonText: '确定',
                    //         showClose: false,
                    //         callback: action => {
                    //             if (process.client) {
                    //                 localStorage.removeItem('lifeData')
                    //             }
                    //             this.$router.push({
                    //                 path:'/login'
                    //             })
                    //         }
                    //     });
                    // })
                } else {
                    return false;
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.user-basic-box {
    // background: url(/images/bg2.jpg);
    background-size: 100%;
    background-position: center;

    .user-face {
        text-align: center;
        width: 100px;
        margin: 0 auto;
        position: relative;

        .avatar {
            .iconfont {
                font-size: 14px;
                position: absolute;
                right: 3px;
                top: 6px;
                background-color: #fff;
                height: 22px;
                width: 22px;
                line-height: 24px;
                border-radius: 100%;
            }

            .male {
                background: var(--blue);
                color: #fff;
            }

            .female {
                background: var(--pink);
                color: #fff;
            }
        }
    }

    .basic {
        font-size: 14px;
        align-items: center;
        justify-content: center;
        margin-top: 15px;

        .item {
            margin: 0 10px;
        }
    }
}


.statistics-content {
    display: flex;
    text-align: center;

    .item {
        &+.item {
            border-left: 1px solid var(--light);
            padding-left: 30px;
        }

        .icon {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            border: 1px solid var(--light);
            background-color: #f2f3f5;
            padding: 5px;
            margin: 0 20px 0 0;
            box-shadow: 3px 2px 11px 0 rgb(70 70 70 / 22%);
        }

        label {
            color: var(--grey);
            font-size: 12px;
            margin-bottom: 5px;
            display: block;
        }

        .num {
            font-size: 30px;
        }
    }
}

.map-center {
    width: 100%;
    height: 300px;
    // background-image: url("@/static/images/map.png");
    background-position: center;
    background-size: cover;
}
</style>
